<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <script src="/js/axios.min.js"></script>
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="/js/echarts.js"></script>
  <link rel="stylesheet" href="/css/main.css"/>
</head>
<body>
<div id="app">
  <div style="width: 97%;" class="topInfo">
    <span>{{staff.staffname}}，欢迎使用后台管理系统，当前登录店铺是</span>
    <span class="branchid">{{staff.branchname}}</span>
  </div>

  <div class="branchInfo">
    <div class="branchItem">
      <div class="left">
        <div style="background: #f5c847">
          <img src="../images/08.png" alt="" width="60px" height="60px">
        </div>
      </div>
      <div class="right">
        <div class="count">{{branchnames}}</div>
        <div class="name">店铺总数</div>
      </div>
    </div>
    <div class="branchItem">
      <div class="left">
        <div style="background: #44aff0">
          <img src="../images/01.png" alt=""width="60px" height="60px">
        </div>
      </div>
      <div class="right">
        <div class="count">{{staffCount}}</div>
        <div class="name">员工总数</div>
      </div>
    </div>
    <div class="branchItem">
      <div class="left">
        <div style="background: #f36f8a">
          <img src="../images/02.png" alt="" height="60px" width="60px">
        </div>
      </div>
      <div class="right">
        <div class="count">{{goodsCount}}</div>
        <div class="name">商品总数</div>
      </div>
    </div>
  </div>

  <fieldset>
    <legend class="legend">数据统计</legend>
    <el-row>
      <el-col :span="8">
        <div class="grid-content">
          <div class="title">商品售价统计</div>
          <div id="fig1" style="width: 90%;height: 400px"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <div class="title">部门人员统计</div>

          <div id="fig2" style="width: 90%;height: 400px"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content">
          <div class="title">商品库存统计</div>

          <div id="fig3" style="width: 90%;height: 400px"></div>
        </div>
      </el-col>
    </el-row>
  </fieldset>
</div>
</body>
<script>
  let app = new Vue({
    el: "#app",
    data: {
      //店铺总数
      branchnames:"",
      //店铺人数
      staffCount:"",
      //商品总和
      goodsCount:"",
      staff:{},
      branchInfo: {

      },
      allGoods: [], //商品售价统计
      allStaff: [],
      //部门员工统计
      branchGoodsInfo:[

      ],//商品库存统计
    },
    created() {
      /*获取详细信息*/
      this.getAllInfo();
      this.getAllInfo2();
      this.getAllInfo3()
      this.loadStaffInfo();
      this.getBranchName();
      this.getStaffInfo();
      this.getGoodsCount();

      this.getBranchName();
      this.getStaffInfo();
      this.getGoodsCount();

      this.getBranchName();
      this.getStaffInfo();
      this.getGoodsCount();
    },
    methods: {
      //查询用户信息
      loadStaffInfo(){
        axios.get("/staff/info1").then(result=>{
          this.branchInfo = result.data.data.branchInfo;
          this.staff=result.data.data;
        })
      },
      //查询店铺总数
      getBranchName(){
        axios.post("/branch/getBranchName").then(result=>{
          this.branchnames=result.data.data
        })
      },
      //查询员工总数
      getStaffInfo(){
        axios.post("/staff/staffs").then(result=>{
          this.staffCount=result.data.data
        })
      },
      getGoodsCount(){
        axios.post("/goods/shops").then(result=>{
          this.goodsCount=result.data.data
          console.log(this.goodsCount)
        })
      },
      getAllInfo(){
        axios.post("/goods/tongji").then(result=>{
          this.allGoods=result.data.data
          this.priceGoods()
        })
      },
      /*商品售价统计*/
      priceGoods() {
        let myChart = echarts.init(document.getElementById('fig1'));
        let xDataArr = [];
        let yDataArr = [];
        let yDataArr2 = [];
        for (let item of this.allGoods) {
          xDataArr.push(item.goodsname);
          yDataArr.push(item.cprice);
          yDataArr2.push(item.sprice);
        }
        // 绘制图表
        myChart.setOption({
          xAxis: {
            grid: {
              //定位
              top: '10%',
              bottom: '35%'
            },
            type: 'category',
            data: xDataArr,
            axisLabel: {
              rotate: 30,  //让文本倾斜
              interval: 0,
              // show: true,
              textStyle: {
                color: "#23262e",
                fontSize: 8
              },
            },
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              name: '进价',
              type: 'line',
              data: yDataArr,
              stack: 'all',
              areaStyle: {},
            },
            {
              name: '售价',
              type: 'line',
              data: yDataArr2,
              stack: 'all',
              areaStyle: {}
            }
          ],
          tooltip: {
            trigger: 'axis',
            formatter: function (arg) {
              return arg[0].name +
                      "</br><div style='width: 10px;height: 10px;margin: 0 4px;background: red;border-radius: 50%;display: inline-block'> </div>进价:" + arg[0].data +
                      "</br><div style='width: 10px;height: 10px;margin: 0 4px;background: #b5c334;border-radius: 50%;display: inline-block'> </div>售价:" + arg[1].data
            }
          },
          //工具箱按钮
          toolbox: {
            feature: {
              saveAsImage: {},//导出图片
            }
          },
          //图例
          legend: {
            data: ['进价', '售价']
          },

        })
        window.onresize = myChart.resize;
      },

      /*部门员工统计*/
      getAllInfo2(){
        axios.post("/staff/BuMen").then(result=>{
        /*  console.log(result)*/
          this.staff = result.data.data
          this.allStaff=result.data.data
          this.deptStaff()
          // console.log(this.allStaff)
        })
      },
      deptStaff() {
        let myChart = echarts.init(document.getElementById('fig2'));
        let option = {
          title: {
            text: "各部门员工统计",
            //控制标题位置
            x: 'center',
            y: 4,
            subtext: '实时更新'
          },
          series: [
            {
              type: 'pie',
              data: this.allStaff,
              label: {//饼图文字的显示
                show: true,//显示文字
                formatter: function (arg) {
                  return arg.name;
                }
              },
              center: ['50%', '65%'],
              radius: '40%',//饼图的半径
              // roseType: 'radius',//南丁格尔图  饼图的每一个区域的半径是不同的
              selectedMode: 'multiple',
              selectedOffset: 30,//选中偏移量
            },
          ],
          //图例
          legend: {
            orient: "vertical",//图例的布局，水平布局、垂直布局
            type: 'scroll',
            left: 10,
            top: 4,
            icon: 'circle',
            textStyle: {//图例字体样式
              color: "#000",
              fontSize: 14,
              fontFamily: "微软雅黑"
            }
          },
          //工具箱按钮
          toolbox: {
            feature: {
              saveAsImage: {},//导出图片
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (arg) {
              return "部门</br>" + arg.name + ": " + arg.value + " (" + arg.percent + "%)";
            }
          }
        };
        // 5.进行配置
        myChart.setOption(option);
        window.onresize = myChart.resize;
      },
      getAllInfo3(){
        axios.post("/goods/kuCun").then(result=>{
          /*  console.log(result)*/
          this.branchGoodsInfo=result.data.data
          // console.log(this.branchGoodsInfo)
          this.goodsCountInfo()
        })
      },
      /*商品库存统计*/
      goodsCountInfo() {
        let myChart = echarts.init(document.getElementById('fig3'));
        let option = {
          title: {
            text: "商品库存统计",
            //控制标题位置
            x: 'center',
            y: 10,
            subtext: '实时更新'
          },
          xAxis: {
            type: 'category',  // 类目轴
            data: this.branchGoodsInfo.name,//参数
            axisLabel: {
              rotate: 30,  //让文本倾斜
              show: true,
              textStyle: {
                color: "#23262e",
                fontSize: 10
              },
            },
            axisPointer: {
              type: 'shadow'
            }
          },

          yAxis: {
            type: 'value'
          },
          series: [
            {
              type: 'bar',
              data: this.branchGoodsInfo.value,//参数
              itemStyle: {
                color: function (params) {
                  let colorList = ['#c1232b', '#b5c334', '#fcce10', '#c75450', '#ffb32c', '#5845ba']
                  return colorList[params.dataIndex]
                },
              },
              areaStyle: {},
            }
          ],
          //工具箱按钮
          toolbox: {
            feature: {
              saveAsImage: {}
              ,//导出图片
            }
          },
          //柱状图上的文字显示
          label: {
            show: true,  // 是否显示
            position: 'top',  // 显示位置
          },
          tooltip: {
            trigger: 'axis',
            formatter: function (arg) {
              return arg[0].name +
                      "</br><div style='width: 10px;height: 10px;margin: 0 4px;background: red;border-radius: 50%;display: inline-block'> </div>商品库存:" + arg[0].data;
            },
            showDelay: 0,  // 显示延迟
            axisPointer: {
              type: 'shadow',
            }
          },
          barWidth: '40%', //柱状图的宽度
        };
        // 5.进行配置
        myChart.setOption(option)
        window.onresize = myChart.resize;
      },
    }
  })
</script>
</html>
